<script setup lang="ts">
import type { FastOffset, PlacementValue } from "../popover/type"

const props = defineProps<{
  icon?: string
  label: string
  placement?: PlacementValue
  fastOffset?: FastOffset
}>()

const iconClass = computed(() => `iconfont ${props.icon}`)
const show = ref(false)
</script>
<template>
  <div class="icon-label" @mouseenter="show = true" @mouseleave="show = false">
    <div v-if="props.icon" class="icon">
      <i :class="iconClass"></i>
    </div>
    <div class="label">
      {{ props.label }}
    </div>

    <Popover
      v-if="$slots.default"
      v-model:show="show"
      :placement="props.placement || 'bottom'"
      :fast-offset="props.fastOffset || 'center'"
    >
      <slot></slot>
    </Popover>
  </div>
</template>
<style lang="less" scoped>
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3rem);
  }
  100% {
    transform: translateY(0);
  }
}

.icon-label {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &:hover {
    div:first-child {
      animation: jump 0.4s;
    }
  }

  .iconfont {
    font-size: 1.4rem;
  }
}
</style>
